<template>
	<view class="refuel-container">
		<view class="blue-background"></view>
		
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<input type="text" placeholder="输入需要搜索的内容" />
				<image src="/static/kun/index/search.png" mode="aspectFit" class="search-icon"></image>
			</view>
			<view class="mode-switch" @tap="switchMode">
				<text>{{isMapMode ? '列表' : '地图'}}模式</text>
				<image src="/static/kun/index/refuel/组 5@2x.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 油号选择 -->
		<view class="oil-types">
			<view 
				v-for="type in oilTypes" 
				:key="type"
				:class="['type-item', { active: currentOilType === type }]"
				@tap="selectOilType(type)"
			>
				{{type}}
			</view>
		</view>
		
		<!-- 地图模式 -->
		<template v-if="isMapMode">
			<view class="map-container">
				<map
					class="map"
					:latitude="latitude"
					:longitude="longitude"
					:markers="markers"
					show-location
					@markertap="onMarkerTap"
				></map>
				
				<!-- 选中的加油站信息 -->
				<view class="station-brief" v-if="selectedStation">
					<view class="station-main">
						<view class="station-info">
							<text class="station-name">{{selectedStation.name}}</text>
							<text class="station-address">{{selectedStation.address}}</text>
						</view>
						<image :src="selectedStation.image" mode="aspectFill" class="station-image"></image>
					</view>
					<view class="info-link" @tap="viewDetail">
						<text>门店详情</text>
						<text class="arrow">>></text>
					</view>
					<button class="nav-btn" @tap="navigate">立即导航</button>
				</view>
			</view>
		</template>
		
		<!-- 列表模式 -->
		<template v-else>
			<view class="station-list">
				<view class="station-card" v-for="station in stations" :key="station.id">
					<view class="station-content">
						<view class="station-header">
							<text class="name">{{station.name}}</text>
							<text class="distance">{{station.distance}}m</text>
						</view>
						<view class="station-main">
							<view class="info-section">
								<view class="discount-tags">
									<text class="tag" v-for="(tag, index) in station.discounts" :key="index">{{tag}}</text>
								</view>
								<view class="business-info">
									<image :src="station.image" mode="aspectFill" class="station-image"></image>
									<view class="right-section">
										<text class="time">营业时间: {{station.businessHours}}</text>
										<text class="price">￥{{station.price}}/升</text>
										<view class="address-section">
											<text class="address-text">{{station.address}}</text>
											<image src="/static/kun/index/refuel/plane@2x.png" mode="aspectFit" class="nav-icon"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isMapMode: false,
			currentOilType: '92#',
			oilTypes: ['90#', '92#', '93#', '95#', '97#', '98#'],
			latitude: 35.23375,
			longitude: 113.24201,
			markers: [{
				id: 1,
				latitude: 35.23375,
				longitude: 113.24201,
				iconPath: '/static/kun/index/refuel/station.png', // 加油站图标
				width: 32,
				height: 32
			}],
			selectedStation: {
				id: 1,
				name: '中国石油加油站',
				distance: '556',
				discounts: ['满200减20', '满500减60'],
				businessHours: '周一至周五',
				price: '5.66',
				address: '山阳区人民路与解放路交叉口',
				image: '/static/kun/index/station1.jpg'
			},
			stations: [
				{
					id: 1,
					name: '中国石油加油站',
					distance: '556',
					discounts: ['满200减20', '满500减60'],
					businessHours: '周一至周五',
					price: '5.66',
					address: '山阳区人民路与解放路交叉口',
					image: '/static/kun/index/refuel/加油站.png'
				},
				// 可以添加更多加油站数据
			]
		}
	},
	onLoad() {
		// 页面加载时默认选中第一个加油站
		if (this.stations.length > 0) {
			this.selectedStation = this.stations[0]
		}
	},
	methods: {
		switchMode() {
			this.isMapMode = !this.isMapMode
		},
		selectOilType(type) {
			this.currentOilType = type
		},
		onMarkerTap(e) {
			const station = this.stations.find(s => s.id === e.markerId)
			if (station) {
				this.selectedStation = station
			}
		},
		navigate() {
			// 实现导航功能
			uni.showToast({
				title: '开始导航',
				icon: 'success'
			})
		},
		viewDetail() {
			// 查看加油站详情
			uni.showToast({
				title: '查看详情',
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.refuel-container {
	min-height: 100vh;
	background: #f5f5f5;
	position: relative;
	padding: 0 20rpx;
	
	.blue-background {
		position: absolute;
		top: -89rpx;
		left: 0;
		right: 0;
		height: 400rpx;
		background: linear-gradient(135deg, #3887FC, #1B6AE9);
		z-index: 0;
	}
	
	.search-bar {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		
		.search-input {
			flex: 1;
			background: #fff;
			border-radius: 40rpx;
			padding: 15rpx 30rpx;
			margin-right: 20rpx;
			display: flex;
			align-items: center;
			
			input {
				flex: 1;
				font-size: 28rpx;
			}
			
			.search-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.mode-switch {
			width: 100rpx;
			height: 100rpx;
			padding: 0;
			background: none;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
				font-size: 24rpx;
				z-index: 2;
				white-space: nowrap;
			}
			
			image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
		}
	}
	
	.oil-types {
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		
		.type-item {
			background: #fff;
			padding: 10rpx 30rpx;
			border-radius: 30rpx;
			font-size: 26rpx;
			color: #666;
			
			&.active {
				background: #4080ff;
				color: #fff;
			}
		}
	}
	
	.map-container {
		position: relative;
		z-index: 1;
		height: calc(100vh - 300rpx);
		
		.map {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
		
		.station-brief {
			position: absolute;
			bottom: 30rpx;
			left: 30rpx;
			right: 30rpx;
			background: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			
			.station-main {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				
				.station-info {
					flex: 1;
					margin-right: 20rpx;
					
					.station-name {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						margin-bottom: 10rpx;
						display: block;
					}
					
					.station-address {
						font-size: 26rpx;
						color: #666;
					}
				}
				
				.station-image {
					width: 160rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}
			}
			
			.info-link {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				border-top: 2rpx solid #f5f5f5;
				font-size: 26rpx;
				color: #666;
				
				.arrow {
					color: #999;
				}
			}
			
			.nav-btn {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background: linear-gradient(135deg, #3887FC, #1B6AE9);
				color: #fff;
				font-size: 32rpx;
				border-radius: 0;
				margin: 0;
			}
		}
	}
	
	.station-list {
		position: relative;
		z-index: 1;
		padding: 20rpx 0;
		
		.station-card {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.station-content {
				.station-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.name {
						font-size: 36rpx;
						font-weight: 500;
						color: #333;
					}
					
					.distance {
						color: #4080ff;
						font-size: 26rpx;
					}
				}
				
				.station-main {
					display: flex;
					justify-content: space-between;
					
					.info-section {
						flex: 1;
						margin-right: 20rpx;
						
						.discount-tags {
							margin-bottom: 16rpx;
							
							.tag {
								background: #FFF2F0;
								color: #FF6B35;
								font-size: 24rpx;
								padding: 4rpx 12rpx;
								border-radius: 6rpx;
								margin-right: 10rpx;
							}
						}
						
						.business-info {
							display: flex;
							align-items: flex-start;
							margin-bottom: 0;
							position: relative;
							
							.station-image {
								width: 240rpx;
								height: 180rpx;
								border-radius: 8rpx;
								margin-right: 20rpx;
							}
							
							.right-section {
								flex: 1;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								height: 180rpx;
								padding: 10rpx 0;
								
								.time {
									font-size: 26rpx;
									color: #666;
								}
								
								.price {
									color: #FF6B35;
									font-weight: 500;
									font-size: 26rpx;
									margin: 15rpx 0;
								}
								
								.address-section {
									display: flex;
									justify-content: space-between;
									align-items: center;
									
									.address-text {
										flex: 1;
										font-size: 26rpx;
										color: #666;
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
										margin-right: 20rpx;
									}
									
									.nav-icon {
										width: 40rpx;
										height: 40rpx;
										flex-shrink: 0;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
